<template>
  <div class="flex justify-end mt-6">
    <nav class="flex items-center space-x-2">
      <button
        @click="handlePageChange(currentPage - 1)"
        :disabled="currentPage === 1"
        class="px-3 py-1 rounded border"
        :class="
          currentPage === 1
            ? 'text-gray-400 border-gray-200 cursor-not-allowed'
            : 'text-gray-600 border-gray-300 hover:bg-gray-50'
        "
      >
        上一页
      </button>
      <span class="px-3 py-1 text-gray-600"
        >{{ currentPage }} / {{ totalPages }}</span
      >
      <button
        @click="handlePageChange(currentPage + 1)"
        :disabled="currentPage === totalPages"
        class="px-3 py-1 rounded border"
        :class="
          currentPage === totalPages
            ? 'text-gray-400 border-gray-200 cursor-not-allowed'
            : 'text-gray-600 border-gray-300 hover:bg-gray-50'
        "
      >
        下一页
      </button>
    </nav>
  </div>
</template>

<script setup lang="ts">
interface Props {
  currentPage: number;
  totalPages: number;
}

const props = defineProps<Props>();
const emit = defineEmits(["update:currentPage"]);

const handlePageChange = (page: number) => {
  if (page < 1 || page > props.totalPages) return;
  emit("update:currentPage", page);
};
</script>
